<template>
    <el-container>
        <el-header >
            <div class="title">
                <a href="/">糖尿病友之家</a>
            </div>
            <div class="menu">
                <el-menu router
                        :default-active=$route.path
                         class="el-menu-demo"
                         mode="horizontal"
                         background-color="rgb(229, 245, 249)"
                         text-color="rgb(73, 131, 226)"

                >
                    <el-menu-item index="/" >首页</el-menu-item>
                    <el-menu-item index="/consult">咨询栏</el-menu-item>
                    <el-menu-item index="/forecast">预测中心</el-menu-item>
                    <el-menu-item index="/forum" >论坛中心</el-menu-item>
                    <el-menu-item index="/selfcenter" v-show="hasLogin">个人中心</el-menu-item>
                    <el-menu-item class="user" >
                        <el-dropdown>
                            <div>
                                <el-avatar :src="avatar"> {{avatar}} </el-avatar>
                            </div>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item v-show="hasLogin">
                                    <el-link type="primary" href="/manage" :underline="false" v-show="root">后台管理系统</el-link>
                                </el-dropdown-item>
                                <el-dropdown-item v-show="!hasLogin">
                                    <el-link type="primary" href="/login" :underline="false">登录账号</el-link>
                                </el-dropdown-item>
                                <el-dropdown-item v-show="hasLogin"
                                ><el-link type="danger" @click="logout" :underline="false">退出登录</el-link></el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                        <span>{{ user.username }}</span>
                    </el-menu-item>
                </el-menu>
            </div>

        </el-header>
        <el-main>
            <div class="color"></div>
            <div class="color"></div>
            <div class="color"></div>
            <router-view></router-view>
        </el-main>
        <el-footer class="el-footer">
            <div style="margin-top: 20px">
                <el-image src="https://www.gdpu.edu.cn/images/xh.png"></el-image>
            </div>
            <p>联系我们：3211707670@qq.com</p>
            <p>CopyRight@copy2021</p>

        </el-footer>
    </el-container>
</template>

<script>
    export default {
        data() {
            return {
                activeIndex:'/index',
                root: false,
                hasLogin: false,
                avatar:'https://www.gdpu.edu.cn/images/xh.png',
                user: {
                    username: '请先登录',

                },
            }
        },
        methods: {
            logout() {
                const _this = this
                this.$axios.get('http://localhost:8181/register/logout', {
                    headers: {
                        "Authorization": localStorage.getItem("token")
                    }
                }).then((resp) => {
                    _this.$store.commit('REMOVE_INFO')
                    _this.$router.push('/login')
                });
            }
        },
        created() {

            if(this.$store.getters.getUser.username) {
                this.user.username = this.$store.getters.getUser.username
                this.avatar = this.$store.getters.getUser.avatar
                this.hasLogin = true
            }
            if (this.$store.getters.getUser.type===5){
                this.root = true;
            }
        }

    }
</script>

<style src="../../assets/css/my.css" scoped>

</style>